<template>
	<div class="iInformation">
		<Row :gutter="20">
			<i-col :span="6" offset='1'>
				<div class="name" @click.stop='revise'>{{data.name}}</div>
			</i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>成员信息：</label></i-col>
			<i-col :span="4"><p>{{data.name}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>状态：</label></i-col>
			<i-col :span="4"><p>{{data.state}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>部门：</label></i-col>
			<i-col :span="4"><p>{{data.department}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>校区：</label></i-col>
			<i-col :span="4"><p>{{data.campus}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>电话：</label></i-col>
			<i-col :span="4"><p>{{data.phone}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>邮箱：</label></i-col>
			<i-col :span="4"><p>{{data.email}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>QQ：</label></i-col>
			<i-col :span="4"><p>{{data.qq}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>银行卡号：</label></i-col>
			<i-col :span="4"><p>{{data.bank}}</p></i-col>
		</Row>
		<Row :gutter="20">
			<i-col :span="3"><label>简介：</label></i-col>
			<i-col :span="4"><p>{{data.introduction}}</p></i-col>
		</Row>
	</div>
</template>

<script>
import { mapState,mapMutations  } from 'vuex'
import information from './../../api/information.js'
export default {
	name: 'iInformation',
	data () {
		return {
			data:{
				name: '',
				no:'',
				sex:'',
				college:'',
				class:'',
				identity:'部长',
				state:'',
				department:'',
				campus:'',
				phone:'',
				email:'',
				qq:'',
				bank:'',
				introduction:''
			}
			
		};
	},
	computed: {
      ...mapState([
        'name',
		'no',
		'sex',
		'college',
		'class',
		'identity',
		'state',
		'department',
		'campus',
		'phone',
		'email',
		'qq',
		'bank',
		'introduction'
      ])
    },
	methods: {
		...mapMutations([
			'setInformation', 
			]),
		revise(){
			this.$emit('tell-me',this.data)
		},
		getdata(){
			// this.setInformation();
			this.data.name=this.name;
			this.data.no=this.no;
			this.data.sex=this.sex;
			this.data.college=this.college;
			this.data.class=this.class;
			// this.data.identity=this.identity;
			this.data.state=this.state;
			this.data.department=this.department;
			this.data.campus=this.campus;
			this.data.phone=this.phone;
			this.data.email=this.email;
			this.data.qq=this.qq;
			this.data.bank=this.bank;
			this.data.introduction=this.introduction;
		}
	},
	mounted:function(){
		this.getdata();
		if (this.data.name=="") {
			information.information()
			.then(res=>{
				this.data.name=res.result.realName;
				this.data.no=res.result.studentNumber;
				this.data.sex=res.result.sex;
				this.data.college=res.result.college;
				this.data.class=res.result.major;
				this.data.identity=res.result.positionName;
				this.data.state=res.result.state;
				this.data.campus=res.result.campus;
				this.data.phone=res.result.phone;
				this.data.email=res.result.email;
				this.data.qq=res.result.qq;
				this.data.bank=res.result.debitCard;
				this.data.introduction=res.result.introduction;
				this.data.department=res.result.department;
				this.data.allDepartment=res.allDepartment;
				this.data.allCampus=res.allCampus;
			})
			.catch(err => {
				this.$Message.error(err);
			})
		}
	}
}
</script>

<style lang="css" scoped>
.iInformation{
	height: 100%;
	width: 100%;
	font-family: 楷体;
	line-height: 50px
}
.iInformation .name{
	width: 150px;
	height: 150px;
	border-radius: 75px;
	line-height: 150px;
	text-align: center;
	color: #fff;
	font-size: 40px;
	margin-left: 60px;
	background-color: #22baa0;
	cursor: pointer;
	margin-bottom: 20px;
	margin-top: 30px
}
.iInformation label{
	float: right;
	font-weight: 700;
	font-size: 22px;
}
.iInformation p{
	font-size: 22px;
}
</style>